<template>

    <div class="news">
        <!-- 表头按钮组 -->
        <div>
            <div style="float:left;">
                <el-button @click="addHandler">新增</el-button>
            </div>
            <div style="float:right;">
                <el-form  size='small' :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <el-input v-model="params.title" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="params.categoryId" placeholder="请选择所属栏目" clearable>
                        <el-option v-for="item in categories" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>


        <!-- 表格 -->
        <el-table
        size='small'
        :data="tableData"
        style="width: 100%">
        <el-table-column
        prop="id"
        label="编号"
        width="80">
        </el-table-column>
        <el-table-column
        prop="title"
        label="标题">
        </el-table-column>
        <el-table-column
        prop="category.name"
        label="所属分类">
        </el-table-column>
        <el-table-column
        prop="publishTime"
        label="发布时间"
        width='200'>
        </el-table-column>
        <el-table-column
        prop="thumpUp"
        label="点赞"
        width='80'>
        </el-table-column>
        <el-table-column
        prop="readTimes"
        label="阅读次数"
        width='80'>
        </el-table-column>
        <el-table-column
        prop="status"
        label="状态"
        width='80'>
        </el-table-column>
        <el-table-column
        label="操作"
        width='150'>
            <template v-slot='scope'>
                <span @click="toDelete(scope.row)">删除 </span>
                <span @click="toEdit(scope.row)"> 修改</span>
            </template>
        </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            layout="prev, pager, next"
            :page-size='params.pageSize'
            :current-page='params.page'
            :total="total"
            @current-change='pageChange'>
        </el-pagination>


        <!-- 模态框 -->
        <el-dialog title="发布新闻资讯" :visible.sync="dialogFormVisible" width="80%">
        <el-form>
            <el-form-item label="新闻标题" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属分类" :label-width="formLabelWidth">
            <el-select v-model="form.categoryId" placeholder="请选择所属分类">
                <el-option v-for="item in categories" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="新闻内容" :label-width="formLabelWidth">
            <Tinymce v-model="form.content" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveNews">确 定</el-button>
        </div>
        </el-dialog>
    </div>
</template>

<script>
// 导入自定义组件
import Tinymce from '@/components/Tinymce'
import axios from '@/http/axios'
import qs from 'qs'
export default {
    // 注册组件
    components:{
        Tinymce
    },
    data(){
        return {
            params:{
                page:1,
                pageSize:5
            },
            tableData:[],
            total:0,
            categories:[],
            form:{},
            formLabelWidth:'120px',
            dialogFormVisible:false
        }
    },
    // 监听params对象
    watch:{
        params:{
            handler:function(){
                this.queryNews();
            },
            deep:true
        }
    },
    created(){
        this.queryNews();
        this.findAllCategory();
    },
    methods:{
        // 删除
        toDelete(item){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                // 封装参数
                let obj = {
                    id:item.id
                }
                axios({
                    url:'http://121.199.29.84:8001/article/deleteById',
                    method:'get',
                    params:obj
                }).then((res)=>{
                    console.log(res.data);
                    this.queryNews();
                })
                this.$notify({
                    title: '成功',
                    message:'删除成功',
                    type: 'success'
                    
                })
                this.queryNews();
                }).catch(() => {
                this.$notify({
                    title: '成功',
                    message: '取消成功',
                    type: 'success'
                })          
            });
        },
        // 修改
        toEdit(item){
            // 显示模态框
            this.dialogFormVisible=true;
            // 将当前行的数据放入模态框
            this.form=JSON.parse(JSON.stringify(item));
            // 引用数据类型的传递
            // 值传递和引用传递
        },
        // 保存新闻
        saveNews(){
            // console.log(this.form);
            axios({
                url:'http://121.199.29.84:8001/article/saveOrUpdate',
                method:'post',
                data:qs.stringify(this.form),
                contentType:'application/x-www-form-urlencoded'
            }).then((res)=>{
                // console.log(res.data);
                this.$notify({
                title: '成功',
                message: res.data.message,
                type: 'success'
                })
                this.queryNews();
            })
            this.dialogFormVisible = false;
        },
        addHandler(){
            // 显示模态框
            this.dialogFormVisible=true;
            this.form = {};
        },
        // 查询所有栏目
        findAllCategory(){
            axios({
                url:'http://121.199.29.84:8001/category/findAll',
                method:'get'
            }).then((res)=>{
                this.categories = res.data.data;
            })
        },
        // 分页页码改变
        pageChange(page){
            // console.log(page);
            this.params.page = page
        },
        // 分页查询所有的资讯或新闻
        queryNews(){
            axios({
                url:'http://121.199.29.84:8001/article/pageQuery',
                method:'get',
                params:this.params
            }).then((res)=>{
                // console.log(res.data.data);
                this.tableData = res.data.data.list;
                this.total = res.data.data.total;
            })
        }
    }
}
</script>